import {
  updateGoodsAPI,
  mergeLocalCartListAPI,
  getCartListAPI,
  insertCartAPI,
  delCartAPI,
  updateCartAPI,
  toggleAllCartAPI
} from '@/api/cart'

// 获取分类导航列表
import { getCategoryListAPI } from '@/api/home'
import { message } from '@/components/Message'

const state = () => {
  return {
    // 分类导航列表
    categoryList: [],
    // 购物车列表cartList
    cartList: []
  }
}
const mutations = {
  // 修改
  setCategoryList: (state, newList) => {
    state.categoryList = newList
    // state.cartList = newList
  },
  // 添加购物车insertCart
  insertCart: (state, goodsObj) => {
    // 1.检测这个商品是否已加入过 --> skuId
    const item = state.cartList.find((item) => item.skuId === goodsObj.skuId)

    if (item) {
      // 2.加入过了，修改数量
      item.count += goodsObj.count
    } else {
      // 3.没加入过，新加入到头部
      state.cartList.unshift(goodsObj)
    }
  },
  // 删除购物车
  delCart: (state, skuId) => {
    state.cartList = state.cartList.filter((item) => item.skuId !== skuId)
  },
  // 更新购物车（更新现价、库存、有否有效3个状态）
  updateCart: (state, { status, skuId }) => {
    // 基于 skuId 去 cartList 中找到对应的商品对象
    const item = state.cartList.find((item) => item.skuId === skuId)
    if (!item) return
    // 把 status 最新的状态赋值给当前商品对象(单个赋值)
    item.nowPrice = status.nowPrice
    item.stock = status.stock
    item.isEffective = status.isEffective
    // 这里不能展开赋值，这样会破坏item的响应式
    // item = {
    //   ...item,
    //   ...status
    // }
  },
  // 更新指定商品的数量
  updateCartCount: (state, { skuId, count }) => {
    const item = state.cartList.find((item) => item.skuId === skuId)
    if (!item) return
    item.count = count
  },
  // 更新指定商品的选中状态
  updateCartSelected: (state, { skuId, selected }) => {
    const item = state.cartList.find((item) => item.skuId === skuId)
    if (!item) return
    item.selected = selected
  },
  // 切换全选或者全不选
  toggleAllCartList: (state, selected) => {
    // 1.先筛选出有效的购物车列表
    // 2.遍历，把selected的值赋值给每个对象的selecetd属性
    state.cartList
      .filter(({ isEffective, stock }) => isEffective && stock > 0)
      .forEach((item) => (item.selected = selected))
  },
  // 设置购物车列表
  setCartList: (state, newList) => {
    state.cartList = newList
  }
}
const actions = {
  setCategoryListAction: async ({ commit }) => {
    // 1.调接口，发请求
    const resp = await getCategoryListAPI()
    // 2.提交mutations
    commit('setCategoryList', resp.result)
    // 组件只需要触发这个action 函数即可获取到
  },
  // 通过action 加入购物车 insertCartAction
  // ctx:就是 store 对象，就等同于 const store = useStore()
  // 包含如下属性和方法：
  // commit():触发 mutation
  // dispatch():触发 action
  // state:当前模块自己的state
  // getters:当前模块自己的getters
  // rootState:全局state,通过它可以访问其他模块下state
  // rootGetters:全局getters,通过它可以访问其他模块下的state

  // 异步添加购物车
  insertCartAction: async ({ rootGetters, commit, dispatch }, goodsObj) => {
    if (rootGetters.token) { // 已登录
      // 1.发请求、同步到后台
      await insertCartAPI(goodsObj.skuId, goodsObj.count)
      // 2.重新拉取一次数据
      await dispatch('updateCartAction')
      console.log('已登录')
      // 1.同步到后台
      // 2.同步到vuex
    } else {
      console.log('未登录')
      // 提交 mutation
      commit('insertCart', goodsObj)
    }
  },
  // 异步删除购物车
  delCartAction: async ({ rootGetters, commit, dispatch }, skuId) => {
    if (rootGetters.token) { // 已登录
      // 1.发请求、删除指定商品
      await delCartAPI([skuId])
      // 2.重新拉取新数据
      await dispatch('updateCartAction')
      console.log('已登录-发请求！')
    } else {
      // 未登录
      commit('delCart', skuId)
    }
  },
  // 异步更新购物车（本地刷新更新或从服务器拉取新数据）
  updateCartAction: async ({ rootGetters, commit, state }) => {
    if (rootGetters.token) { // 已登录
      // 1. 发请求、获取购物车列表
      const resp = await getCartListAPI()
      // 2. 提交mutation
      commit('setCartList', resp.result)
    } else { // 未登录
      // 遍历 cartList
      for (let i = 0; i < state.cartList.length; i++) {
        const item = state.cartList[i]
        // 依次发请求、更新每个商品状态
        const resp = await updateGoodsAPI(item.skuId)
        // 拿到resp中的商品状态，resp.result，提交mutation
        commit('updateCart', {
          // 更新的状态
          status: resp.result,
          // 更新指定skuId的商品状态
          skuId: item.skuId
        })
      }
      // 成功的提示
      message({ type: 'success', text: '更新购物车列表成功' })
    }
  },
  // 异步更新指定商品数量
  updateCartCountAction: async ({ rootGetters, commit, dispatch }, { skuId, count }) => {
    if (rootGetters.token) { // 已登录
      // 1. 发请求、更新商品的数量
      await updateCartAPI({
        skuId,
        count
      })
      // 2. 重新拉取一次数据
      await dispatch('updateCartAction')
    } else { // 未登录
      commit('updateCartCount', { skuId, count })
    }
  },
  // 更新指定商品的选中状态
  updateCartSelectedAction: async ({ rootGetters, commit, dispatch }, { skuId, selected, count }) => {
    if (rootGetters.token) { // 已登录
      // 1. 发请求、更新商品的选中状态
      await updateCartAPI({
        skuId,
        selected,
        count
      })
      // 2. 重新拉取一次数据
      await dispatch('updateCartAction')
    } else { // 未登录
      commit('updateCartSelected', { skuId, selected })
    }
  },
  // 异步切换全选或全不选
  toggleAllCartListAction: async ({ rootGetters, commit, getters, dispatch }, selected) => {
    if (rootGetters.token) { // 已登录
      // 1. 映射参数、得到skuId的数组
      const ids = getters.effectiveCartList.map(({ skuId }) => skuId)
      // 2. 发请求、状态同步到数据库
      await toggleAllCartAPI(ids, selected)
      // 3. 拉取一次新数据
      await dispatch('updateCartAction')
    } else { // 未登录
      // 提交mutation
      commit('toggleAllCartList', selected)
    }
  },
  // 合并本地购物车列表
  mergeLocalCartListAction: async ({ state, dispatch }) => {
    // 1. 基于 state 做个map映射，得到需要的属性数组
    const cartList = state.cartList.map(({ skuId, count, selected }) => {
      return {
        skuId,
        count,
        selected
      }
    })
    // 2. 发请求、把本地的购物车合并（同步）到数据库
    await mergeLocalCartListAPI(cartList)
    // resp={code: "1",msg: "操作成功",result: null}
    // 3. 获取购物车列表
    dispatch('updateCartAction')
  }

  // 异步设置购物车列表
  // setCartListAction: async ({ commit }) => {
  //   // 1.发请求、获取购物车列表
  //   const resp = await getCartListAPI()
  //   // 2.提交mutation
  //   commit('setCartList', resp.result)
  // }
}
const getters = {
  // 计算出有效的购物车列表 -> isEffective 为true 并且 stock大于零
  effectiveCartList: (state) => {
    return state.cartList.filter(({ isEffective, stock }) => isEffective && stock > 0)
  },
  // 计算有效的商品总数量
  effectiveTotalCount: (state, getters) => {
    return getters.effectiveCartList.reduce((sum, { count }) => sum + count, 0)
  },
  // 计算有效的商品总价格
  effectiveTotalAmount: (state, getters) => {
    return getters.effectiveCartList.reduce((sum, { count, nowPrice }) => sum + count * nowPrice, 0)
  },
  // 计算出无效的购物车列表
  noneffectiveCartList: (state) => {
    return state.cartList.filter(({ isEffective, stock }) => !(isEffective && stock > 0))
  },
  // 从有效的购物车列表计算出所有选中的
  allSelectedCartList: (state, getters) => {
    return getters.effectiveCartList
      .filter(({ selected }) => selected)
  },
  // 所有选中的商品总数量
  allSelectedTotalCount: (state, getters) => {
    return getters
      .allSelectedCartList
      .reduce((sum, { count }) => sum + count, 0)
  },
  // 所有选中的商品总价
  allSelectedTotalAmount: (state, getters) => {
    return getters
      .allSelectedCartList
      .reduce((sum, { nowPrice, count }) => sum + +nowPrice * count, 0)
  },
  // 判断有效的购物车列表中所有商品是否都选中
  // 选中的标识： selected -> true
  isAllSelected: (state, getters) => {
    // every()方法检测数组：就算数组为空，它的返回值是true
    return getters.effectiveCartList.length
      ? getters.effectiveCartList.every(({ selected }) => selected)
      : false
  }
}
export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}
